<template>
    <div class="Gantt">
        <div class="content">
            <div class="info" style="margin-top: 2px" :style="{ height: 'fit-content' }">
                <div id="gui-content">
                    <div class="left-bar">
                        <li
                            :style="{
                                height: 100 / (config.endTime - config.startTime + 1) + '%',
                            }"
                            v-for="(item, index) in config.endTime - config.startTime + 1"
                            :key="index"
                        >
                            <span class="bar-text">{{ timeLine[index] }}</span>
                            <div class="left-bar-lit"></div>
                        </li>
                    </div>
                    <div
                        class="gui-content gui-list clear room-gui-list"
                        v-for="(item, index) in timeLine"
                        :key="index"
                    >
                        <div class="gui-tab">
                            <li
                                class="gui-tab-li"
                                v-for="(item, index) in xAxis"
                                :key="index"
                                :style="{
                                    width: ((item.end - item.start) * 100) / 2269 + '%',
                                }"
                            ></li>
                        </div>
                        <!-- <template>
                            <div
                                v-for="(item, index) in roomData"
                                :key="index"
                                class="meet-item-one"
                                v-bind:class="[
                                    !item.status ? 'meet-color-having' : 'meet-color-finished',
                                ]"
                                :title="item.content"
                                :style="{
                                    left: getLeftTime(item.startTime) + '%',
                                    width: getWidth(item) + '%',
                                }"
                                v-show="getWidth(item) != 0"
                                @click="edit(item)"
                            >
                                <p class="ellipsis">{{ item.content }}</p>
                            </div>
                        </template> -->
                    </div>
                </div>
            </div>
            <!-- x 轴 -->
            <div class="time-bar clear">
                <div class="gui-table clear">
                    <li
                        v-for="(item, index) in xAxis"
                        :key="index"
                        :style="{
                            width: ((item.end - item.start) * 100) / 2269 + '%',
                        }"
                    >
                        <p class="Xbar-text">{{ xText[index] }}</p>
                        <div class="gui-cle"></div>
                        <div class="berth">{{ tagTexts[index] }}</div>
                    </li>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const config = ref({
    startTime: 6,
    endTime: 20,
});
const chooseDate = ref(
    `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
);
let xAxis = ref([
    { start: -324, end: 0 },
    { start: 0, end: 205 },
    { start: 205, end: 410 },
    { start: 410, end: 615 },
    { start: 615, end: 820 },
    { start: 820, end: 1025 },
    { start: 0, end: 155 },
    { start: 155, end: 310 },
    { start: 0, end: 144 },
    { start: 144, end: 286 },
    { start: 286, end: 410 },
    { start: 410, end: 610 },
]);
let arr = xAxis.value.map((item) => {
    return item.end - item.start;
});
console.log(arr, 'arr');
const timeLine = ref([
    '16:00',
    '04/00:00',
    '08:00',
    '16:00',
    '05/00:00',
    '08:00',
    '16:00',
    '16:00',
    '04/00:00',
    '08:00',
    '16:00',
    '05/00:00',
    '08:00',
    '16:00',
    '05/00:00',
]);
let xText = ref([
    '-324',
    '0',
    '205',
    '410',
    '615',
    '820',
    '0',
    '155',
    '310',
    '0',
    '144',
    '286',
    '0',
    '144',
    '286',
    '0',
    '144',
    '286',
]);
var tagTexts = ref([
    'ORE BERTH',
    'BERTH 1',
    'BERTH 2',
    'BERTH 3',
    'BERTH 4',
    'BERTH 5',
    'BERTH 6',
    'BERTH 7',
    'BERTH 8',
    'BERTH 9',
    'BERTH 10',
    'BERTH 11',
    // 'BERTH 12',
]);
// const formLabelWidth = ref(' 120px');
const meetTime = ref([]);
const form = ref({
    id: new Date().getTime(),
    roomId: '',
    content: '',
    status: 0,
    startTime: '',
    endTime: '',
});
const roomData = ref([
    {
        roomId: '1123',
        id: '223865',
        status: 0,
        startTime: `${new Date().getFullYear()}-${
            new Date().getMonth() + 1
        }-${new Date().getDate()} 8:10:00`,
        endTime: `${new Date().getFullYear()}-${
            new Date().getMonth() + 1
        }-${new Date().getDate()} 10:00:00`,
        content: '泊位1',
    },
    {
        roomId: '23234',
        id: '879786',
        status: 1,
        startTime: `${new Date().getFullYear()}-${
            new Date().getMonth() + 1
        }-${new Date().getDate()} 14:00:00`,
        endTime: `${new Date().getFullYear()}-${
            new Date().getMonth() + 1
        }-${new Date().getDate()} 16:00:00`,
        content: '泊位2',
    },
]);
const roomList = ref([
    {
        roomId: '1123',
        name: '一号会议室',
        roomData: [
            {
                roomId: '1123',
                id: '223865',
                status: 0,
                startTime: `${new Date().getFullYear()}-${
                    new Date().getMonth() + 1
                }-${new Date().getDate()} 8:10:00`,
                endTime: `${new Date().getFullYear()}-${
                    new Date().getMonth() + 1
                }-${new Date().getDate()} 10:00:00`,
                content: '泊位1',
            },
        ],
    },
    {
        roomId: '23234',
        name: '二号会议室',
        roomData: [
            {
                roomId: '23234',
                id: '879786',
                status: 1,
                startTime: `${new Date().getFullYear()}-${
                    new Date().getMonth() + 1
                }-${new Date().getDate()} 14:00:00`,
                endTime: `${new Date().getFullYear()}-${
                    new Date().getMonth() + 1
                }-${new Date().getDate()} 16:00:00`,
                content: '泊位2',
            },
        ],
    },
    {
        roomId: '23236',
        name: '二号会议室',
        roomData: [
            {
                roomId: '23236',
                id: '879782',
                status: 1,
                startTime: `${new Date().getFullYear()}-${
                    new Date().getMonth() + 1
                }-${new Date().getDate()} 14:00:00`,
                endTime: `${new Date().getFullYear()}-${
                    new Date().getMonth() + 1
                }-${new Date().getDate()} 16:00:00`,
                content: '泊位2',
            },
        ],
    },
]);

const getLeftTime = (cTime) => {
    const dTime = new Date(cTime).getTime();
    // 2020-01-14 6:00:00
    const leftTime = new Date(chooseDate.value + ' ' + config.value.startTime + ':00:00').getTime();
    console.log(leftTime, 'leftTime');
    if (leftTime >= dTime) {
        return 12;
        // return 0;
    } else {
        const time = (dTime - leftTime) / 1000; // 秒数
        const leftPercent =
            (time / ((config.value.endTime - config.value.startTime + 1) * 60 * 60)) * 100 * 0.88 +
            12;
        // eslint-disable-next-line no-debugger
        if (leftPercent < 100) {
            return leftPercent;
        } else {
            return 100;
        }
    }
};
const getWidth = (item) => {
    const _left1 = getLeftTime(item.startTime);
    const _left2 = getLeftTime(item.endTime);
    console.log(_left1, _left2);
    return _left2 - _left1;
};
const edit = (item: any) => {
    //   this.dialogFormVisible = true;
    form.value = { ...item };
    meetTime.value = [item.startTime, item.endTime];
};
</script>
<style lang="less" scoped>
div {
    box-sizing: border-box;
}
.berth {
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #b4b4b4;
    margin: 10px 0px;
    color: #3d3d3d;
    font-weight: bold;
}
.main-content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
#gui-content {
    position: relative;
    height: 500px;
    padding-left: 68px;
    box-sizing: border-box;
    // overflow: hidden;
    .left-bar {
        position: absolute;
        left: 58px;
        top: 0;
        height: 100%;
        li {
            padding-left: 10px;
            position: relative;
            border-right: solid 1px #b4b4b4;
            z-index: 666;
            .bar-text {
                position: absolute;
                left: -65px;
                top: -8px;
                text-align: right;
                margin: 0;
                width: 70px;
                font-size: 14px;
            }
            .left-bar-lit {
                position: absolute;
                right: 0;
                top: 0;
                width: 30%;
                height: 2px;
                background: #fff;
                border-top: solid 1px #b4b4b4;
                z-index: 666;
            }
        }
    }
}
.time-bar {
    padding-left: 68px;
}
.Gantt {
    padding: 20px;
    border-radius: 3px;
    border: 1px solid red;
    height: 100%;
    box-sizing: border-box;
}
.content {
    padding-top: 20px;
}
.Gantt .gui-table,
.gui-tab {
    font-size: 12px;
    color: #b4b4b4;
    margin: 0;
    white-space: nowrap;
}
.Gantt .gui-table li {
    position: relative;
    border-top: solid 1px #b4b4b4;
    z-index: 666;
    cursor: default;
    box-sizing: border-box;
    .Xbar-text {
        position: absolute;
        left: -30px;
        top: -22px;
        display: inline-block;
        background: #fff;
        padding: 0px 10px;
        margin: 0;
        width: 40px;
        text-align: center;
    }
}

.Gantt .gui-table li {
    float: left;
    text-align: left;
    padding-right: 0.4px;
}
.gui-tab .gui-tab-li {
    float: left;
    text-align: left;
    width: 8.9%;
    height: 33.33px;
    line-height: 33.33px;
}
.Gantt .gui-cle {
    position: absolute;
    left: -1px;
    top: -6px;
    width: 1px;
    height: 6px;
    background: #fff;
    border-right: solid 1px #333;
    z-index: 666;
}
.Gantt .gui-lit {
    position: absolute;
    left: 0;
    top: -3px;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    border: solid 1px #1ba5fa;
    margin-left: 50%;
    z-index: 666;
}
.clear {
    *zoom: 1;
    &::after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
        font-size: 0;
    }
}
.Gantt .gui-list:first-child {
    background: #fff;
}
.Gantt .gui-list {
    position: relative;
}

// .Gantt .room-gui-list {
//     border-bottom: 1px solid #f5f5f5;
// }
.gui-tab li {
    position: relative;
    &::after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        border-left: 1px dashed #ccc;
    }
}
.Gantt .meet-color-finished {
    background: #4dc394;
}

.Gantt .meet-color-having {
    background: #eb865e;
}
.Gantt .meet-item-one {
    color: #000;
    text-align: center;
    position: absolute;
    height: 58px;
    left: 12%;
    top: 1px;
    color: #fafafa;
    font: 14px/60px microsoft yahei;
    padding: 0 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    width: 20%;
}

li {
    list-style: none;
}
.ellipsis {
    overflow: hidden;
    margin-top: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
